import React, { PureComponent } from "react";
import {
  addBookAction,
  addCountActionAsync,
} from "../../store/actions";

import { connect } from "react-redux";

class StoreReactReduxDemo extends PureComponent {
  addCount = () => {
    this.props.addCountAction();
  };

  addBook = () => {
    this.props.addBookAction({
      id: "01002",
      name: "十万个为什么",
    });
  };

  render() {
    console.log("StoreReactReduxDemo.render：this.props", this.props);
    return (
      <div>
        <h1>immutable和redux结合</h1>
        <p>count:{this.props.count}</p>
        <input type="button" value="count加法" onClick={this.addCount} />
        <hr />
        <ul>
          {this.props.books.map((item) => (
            <li>
              <p>编号：{item.id}</p>
              <p>书名：{item.name}</p>
            </li>
          ))}
          <input type="button" value="添加一本书" onClick={this.addBook} />
        </ul>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    count: state.count,
    books: state.books,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    addCountAction: () => dispatch(addCountActionAsync()),
    addBookAction: (newBook) =>dispatch(addBookAction(newBook)),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(StoreReactReduxDemo);
